<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>WebSocket Chat</title>

	<script>
		var url = "ws://127.0.0.1:6002/page_room";
		var isconn = false;
		var ws = null;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
		//加入聊天室
		function joinRoom() {
            if (isconn===true) {
				alert("你已经在聊天室，不能再加入");
				return;
			}
			var username = document.getElementById("user").value;
			ws = new WebSocket(url);
			//与服务端建立连接触发
			ws.onopen = function () {
				console.log("与服务器成功建立连接")
                isconn = true;
			};
			//服务端推送消息触发
			ws.onmessage = function (ev) {
				talking(ev.data);
			};

			//发生错误触发
			ws.onerror = function () {
				console.log("连接错误")
			};
			//正常关闭触发
			ws.onclose = function () {
				console.log("连接关闭");
                isconn = false;
			};
		}

		//退出聊天室
		function exitRoom() {
			closeWebSocket();
		}

		function sendMsg() {
            if (isconn == false) {
				alert("你已掉线，请重新加入");
				return;
			}
			//消息发送
			ws.send(document.getElementById("sendMsg").value);
			document.getElementById("sendMsg").value = "";


		}

		function closeWebSocket() {
			if (ws) {
				ws.close();
				ws = null;
			}
		}

		function talking(content) {
			document.getElementById("content").append(content + "\r\n");
		}
	</script>
</head>
<body>
	<div style="text-align: center;background-color: rgba(129,86,255,0.35);margin:0 auto;border:1px solid #000;width:600px;height:650px">
		<br>欢迎使用聊天室：<br /><br />
		<textarea id="content" cols="60" rows="30" readonly="readonly"></textarea><br>
		<input type="text" id="sendMsg">
		<button type="button" onclick="sendMsg()">发送消息</button>
		<br /><br />
		用户：<input type="text" id="user">
		<button onclick="joinRoom()">加入群聊</button>
		<button onclick="exitRoom()">退出群聊</button>
	</div>
</body>
</html>